<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>节点操作</title>
  <style>
    div {
      width: 100px;
      background: #cef;
      float: left;
      margin-right: 20px;
      margin-bottom: 20px;
    }

    img {
      width: 100%;
    }

    h4{
      text-align: center;
      font-weight: normal;
      margin: 5px 0 10px;
      user-select: none;
    }
  </style>
</head>

<body>
  <button>点击创建一个 DIV</button>
  <hr>
  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>

  <script>
    //声明一个英雄数组
    let heros = [
      {
        "name": "云缨",
        "image": "/images/heros/538.jpg"
      },
      {
        "name": "艾琳",
        "image": "/images/heros/155.jpg"
      },
      {
        "name": "司空震",
        "image": "/images/heros/537.jpg"
      },
      {
        "name": "澜",
        "image": "/images/heros/528.jpg"
      },
      {
        "name": "夏洛特",
        "image": "/images/heros/536.jpg"
      },
      {
        "name": "阿古朵",
        "image": "/images/heros/533.jpg"
      },
      {
        "name": "蒙恬",
        "image": "/images/heros/527.jpg"
      },
      {
        "name": "镜",
        "image": "/images/heros/531.jpg"
      },
      {
        "name": "蒙犽",
        "image": "/images/heros/524.jpg"
      },
      {
        "name": "鲁班大师",
        "image": "/images/heros/525.jpg"
      },
      {
        "name": "西施",
        "image": "/images/heros/523.jpg"
      },
      {
        "name": "马超",
        "image": "/images/heros/518.jpg"
      },
      {
        "name": "曜",
        "image": "/images/heros/522.jpg"
      },
      {
        "name": "云中君",
        "image": "/images/heros/506.jpg"
      },
      {
        "name": "瑶",
        "image": "/images/heros/505.jpg"
      },
      {
        "name": "盘古",
        "image": "/images/heros/529.jpg"
      },
      {
        "name": "猪八戒",
        "image": "/images/heros/511.jpg"
      },
      {
        "name": "嫦娥",
        "image": "/images/heros/515.jpg"
      },
      {
        "name": "上官婉儿",
        "image": "/images/heros/513.jpg"
      },
      {
        "name": "李信",
        "image": "/images/heros/507.jpg"
      },
      {
        "name": "沈梦溪",
        "image": "/images/heros/312.jpg"
      },
      {
        "name": "伽罗",
        "image": "/images/heros/508.jpg"
      },
      {
        "name": "盾山",
        "image": "/images/heros/509.jpg"
      },
      {
        "name": "司马懿",
        "image": "/images/heros/137.jpg"
      },
      {
        "name": "孙策",
        "image": "/images/heros/510.jpg"
      },
      {
        "name": "元歌",
        "image": "/images/heros/125.jpg"
      },
      {
        "name": "米莱狄",
        "image": "/images/heros/504.jpg"
      },
      {
        "name": "狂铁",
        "image": "/images/heros/503.jpg"
      },
      {
        "name": "弈星",
        "image": "/images/heros/197.jpg"
      },
      {
        "name": "裴擒虎",
        "image": "/images/heros/502.jpg"
      },
      {
        "name": "杨玉环",
        "image": "/images/heros/176.jpg"
      },
      {
        "name": "公孙离",
        "image": "/images/heros/199.jpg"
      },
      {
        "name": "明世隐",
        "image": "/images/heros/501.jpg"
      },
      {
        "name": "女娲",
        "image": "/images/heros/179.jpg"
      },
      {
        "name": "梦奇",
        "image": "/images/heros/198.jpg"
      },
      {
        "name": "苏烈",
        "image": "/images/heros/194.jpg"
      },
      {
        "name": "百里玄策",
        "image": "/images/heros/195.jpg"
      },
      {
        "name": "百里守约",
        "image": "/images/heros/196.jpg"
      },
      {
        "name": "铠",
        "image": "/images/heros/193.jpg"
      },
      {
        "name": "鬼谷子",
        "image": "/images/heros/189.jpg"
      },
      {
        "name": "干将莫邪",
        "image": "/images/heros/182.jpg"
      },
      {
        "name": "东皇太一",
        "image": "/images/heros/187.jpg"
      },
      {
        "name": "大乔",
        "image": "/images/heros/191.jpg"
      },
      {
        "name": "黄忠",
        "image": "/images/heros/192.jpg"
      },
      {
        "name": "诸葛亮",
        "image": "/images/heros/190.jpg"
      },
      {
        "name": "哪吒",
        "image": "/images/heros/180.jpg"
      },
      {
        "name": "太乙真人",
        "image": "/images/heros/186.jpg"
      },
      {
        "name": "蔡文姬",
        "image": "/images/heros/184.jpg"
      },
      {
        "name": "雅典娜",
        "image": "/images/heros/183.jpg"
      },
      {
        "name": "杨戬",
        "image": "/images/heros/178.jpg"
      },
      {
        "name": "成吉思汗",
        "image": "/images/heros/177.jpg"
      },
      {
        "name": "钟馗",
        "image": "/images/heros/175.jpg"
      },
      {
        "name": "虞姬",
        "image": "/images/heros/174.jpg"
      },
      {
        "name": "李元芳",
        "image": "/images/heros/173.jpg"
      },
      {
        "name": "张飞",
        "image": "/images/heros/171.jpg"
      },
      {
        "name": "刘备",
        "image": "/images/heros/170.jpg"
      },
      {
        "name": "后羿",
        "image": "/images/heros/169.jpg"
      },
      {
        "name": "牛魔",
        "image": "/images/heros/168.jpg"
      },
      {
        "name": "孙悟空",
        "image": "/images/heros/167.jpg"
      },
      {
        "name": "亚瑟",
        "image": "/images/heros/166.jpg"
      },
      {
        "name": "橘右京",
        "image": "/images/heros/163.jpg"
      },
      {
        "name": "娜可露露",
        "image": "/images/heros/162.jpg"
      },
      {
        "name": "不知火舞",
        "image": "/images/heros/157.jpg"
      },
      {
        "name": "张良",
        "image": "/images/heros/156.jpg"
      },
      {
        "name": "花木兰",
        "image": "/images/heros/154.jpg"
      },
      {
        "name": "兰陵王",
        "image": "/images/heros/153.jpg"
      },
      {
        "name": "王昭君",
        "image": "/images/heros/152.jpg"
      },
      {
        "name": "韩信",
        "image": "/images/heros/150.jpg"
      },
      {
        "name": "刘邦",
        "image": "/images/heros/149.jpg"
      },
      {
        "name": "姜子牙",
        "image": "/images/heros/148.jpg"
      },
      {
        "name": "露娜",
        "image": "/images/heros/146.jpg"
      },
      {
        "name": "程咬金",
        "image": "/images/heros/144.jpg"
      },
      {
        "name": "安琪拉",
        "image": "/images/heros/142.jpg"
      },
      {
        "name": "貂蝉",
        "image": "/images/heros/141.jpg"
      },
      {
        "name": "关羽",
        "image": "/images/heros/140.jpg"
      },
      {
        "name": "老夫子",
        "image": "/images/heros/139.jpg"
      },
      {
        "name": "武则天",
        "image": "/images/heros/136.jpg"
      },
      {
        "name": "项羽",
        "image": "/images/heros/135.jpg"
      },
      {
        "name": "达摩",
        "image": "/images/heros/134.jpg"
      },
      {
        "name": "狄仁杰",
        "image": "/images/heros/133.jpg"
      },
      {
        "name": "马可波罗",
        "image": "/images/heros/132.jpg"
      },
      {
        "name": "李白",
        "image": "/images/heros/131.jpg"
      },
      {
        "name": "宫本武藏",
        "image": "/images/heros/130.jpg"
      },
      {
        "name": "典韦",
        "image": "/images/heros/129.jpg"
      },
      {
        "name": "曹操",
        "image": "/images/heros/128.jpg"
      },
      {
        "name": "甄姬",
        "image": "/images/heros/127.jpg"
      },
      {
        "name": "夏侯惇",
        "image": "/images/heros/126.jpg"
      },
      {
        "name": "周瑜",
        "image": "/images/heros/124.jpg"
      },
      {
        "name": "吕布",
        "image": "/images/heros/123.jpg"
      },
      {
        "name": "芈月",
        "image": "/images/heros/121.jpg"
      },
      {
        "name": "白起",
        "image": "/images/heros/120.jpg"
      },
      {
        "name": "扁鹊",
        "image": "/images/heros/119.jpg"
      },
      {
        "name": "孙膑",
        "image": "/images/heros/118.jpg"
      },
      {
        "name": "钟无艳",
        "image": "/images/heros/117.jpg"
      },
      {
        "name": "阿轲",
        "image": "/images/heros/116.jpg"
      },
      {
        "name": "高渐离",
        "image": "/images/heros/115.jpg"
      },
      {
        "name": "刘禅",
        "image": "/images/heros/114.jpg"
      },
      {
        "name": "庄周",
        "image": "/images/heros/113.jpg"
      },
      {
        "name": "鲁班七号",
        "image": "/images/heros/112.jpg"
      },
      {
        "name": "孙尚香",
        "image": "/images/heros/111.jpg"
      },
      {
        "name": "嬴政",
        "image": "/images/heros/110.jpg"
      },
      {
        "name": "妲己",
        "image": "/images/heros/109.jpg"
      },
      {
        "name": "墨子",
        "image": "/images/heros/108.jpg"
      },
      {
        "name": "赵云",
        "image": "/images/heros/107.jpg"
      },
      {
        "name": "小乔",
        "image": "/images/heros/106.jpg"
      },
      {
        "name": "廉颇",
        "image": "/images/heros/105.jpg"
      }
    ];
    //生成随机颜色的函数
    function getRandomColor() {
      return `rgb(${_.random(200, 255)},${_.random(200, 255)},${_.random(200, 255)})`;
    }
    /**
     * 节点操作: 就是对 HTML 元素进行『增删改查』
     * 需求1: 点击 button 按钮创建一个 div
     * 需求2: 点击 div 删除当前所点 div
     */
    //获取 button 按钮
    let btn = document.querySelector('button');
    //声明一个变量
    let index = 0;
    //为button按钮绑定单机事件
    btn.onclick = function () {
      //创建一个新的 DIV     create 创建 element 元素
      let div = document.createElement('div');
      //创建img元素
      let img = document.createElement('img');
      //设置img的src属性
      img.src = 'http://cdn.xiaohigh.com' + heros[index].image;
      //创建一个 h4
      let h4 = document.createElement('h4');
      //设置 h4 标签的文本
      h4.innerHTML = heros[index].name;
      index++;
      //将img插入到div中
      div.append(img);
      //将 h4 插入到 div
      div.append(h4)
      //修改 div 的背景颜色
      div.style.background = getRandomColor();
      //将节点插入到 body 标签中
      document.body.append(div);
      //为新创建的 div 绑定单机事件
      div.onclick = function () {
        //确认框
        if (!confirm('您确定要删除当前元素么')) return;
        //删除所点击的div
        div.remove();
      }
    }
  </script>
</body>

</html>